<template>
  <content-wrapper sub-title="系统管理员功能,只在开发模式中显示">
    <div class="box box-solid">
      <div class="box-body table-responsive no-padding">
        <div class="mailbox-controls">
          <div class="btn-group">
            <bs-button v-auth="'system:permission:create'" icon="fa fa-plus" size="sm" :to="{name:'SystemPermissionForm'}"/>
            <bs-button icon="fa fa-refresh" size="sm" :loading="loading" @click="loadPermissionList"/>
          </div>
        </div>
        <table class="table table-hover">
          <thead class="with-border">
          <tr>
            <th width="220">名称</th>
            <th width="150">标识</th>
            <th width="100">类型</th>
            <th width="200">菜单请求</th>
            <th>可控请求</th>
            <th width="100">状态</th>
            <th>&nbsp;</th>
          </tr>
          </thead>
          <tbody>
          <tr v-if="dataList.length == 0">
            <td colspan="20">暂无数据</td>
          </tr>
          <template v-for="item in dataList">
            <tr>
              <td nowrap><i class="fa fa-caret-right"></i> <i v-if="item.icon" :class="item.icon"></i> {{item.name}}</td>
              <td nowrap>{{item.permissionKey}}</td>
              <td nowrap>{{item.typeAlias}}</td>
              <td nowrap>{{item.path}}</td>
              <td>{{item.resource}}</td>
              <td nowrap>
                <p-check v-auth="'system:permission:updateEnable'" class="p-svg p-curve" color="success" toggle v-model="item.enable" @change="onStatus(item)">
                  <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
                    <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                          style="stroke: white;fill:white"></path>
                  </svg>
                  可用
                  <label slot="off-label">不可用</label>
                </p-check>
                <span v-auth-else="'system:permission:updateEnable'">{{item.enable?'可用':'不可用'}}</span>
              </td>
              <td class="actions">
                <router-link v-auth="'system:permission:create'" :to="{name:'SystemPermissionForm',query:{pid:item.id,name:item.name,type:item.type}}" class="fa fa-plus" v-if="item.type != 'FUNCTION'"></router-link>
                <router-link v-auth="'system:permission:update'" :to="{name:'SystemPermissionForm',query:{id:item.id}}" class="fa fa-edit"></router-link>
                <a v-auth="'system:permission:delete'" class="fa fa-trash" @click="onTrash(item)"></a>
              </td>
            </tr>
            <template v-for="menu in item.children">
              <tr class="lv2">
                <td nowrap><i class="fa fa-caret-right" v-if="menu.children"></i> <i v-if="menu.icon" :class="menu.icon"></i> {{menu.name}}</td>
                <td nowrap>{{menu.permissionKey}}</td>
                <td nowrap>{{menu.typeAlias}}</td>
                <td nowrap>{{menu.path}}</td>
                <td>{{menu.resource}}</td>
                <td nowrap>
                  <p-check v-auth="'system:permission:updateEnable'" class="p-svg p-curve" color="success" toggle v-model="menu.enable" @change="onStatus(menu)">
                    <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
                      <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                            style="stroke: white;fill:white"></path>
                    </svg>
                    可用
                    <label slot="off-label">不可用</label>
                  </p-check>
                  <span v-auth-else="'system:permission:updateEnable'">{{menu.enable?'可用':'不可用'}}</span>
                </td>
                <td class="actions">
                  <router-link v-auth="'system:permission:create'" :to="{name:'SystemPermissionForm',query:{pid:menu.id,name:menu.name,type:menu.type}}" class="fa fa-plus" v-if="item.type != 'FUNCTION'"></router-link>
                  <router-link v-auth="'system:permission:update'" :to="{name:'SystemPermissionForm',query:{id:menu.id}}" class="fa fa-edit"></router-link>
                  <a v-auth="'system:permission:delete'" class="fa fa-trash" @click="onTrash(menu)"></a>
                </td>
              </tr>
              <template v-for="fun in menu.children">
                <tr class="lv3">
                  <td nowrap> <i v-if="fun.icon" :class="fun.icon"></i> {{fun.name}}</td>
                  <td nowrap>{{fun.permissionKey}}</td>
                  <td nowrap>{{fun.typeAlias}}</td>
                  <td nowrap>{{fun.path}}</td>
                  <td>{{fun.resource}}</td>
                  <td nowrap>
                    <p-check v-auth="'system:permission:updateEnable'" class="p-svg p-curve" color="success" toggle v-model="fun.enable" @change="onStatus(fun)">
                      <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
                        <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                              style="stroke: white;fill:white"></path>
                      </svg>
                      可用
                      <label slot="off-label">不可用</label>
                    </p-check>
                    <span v-auth-else="'system:permission:updateEnable'">{{fun.enable?'可用':'不可用'}}</span>
                  </td>
                  <td class="actions">
                    <router-link v-auth="'system:permission:update'" :to="{name:'SystemPermissionForm',query:{id:fun.id}}" class="fa fa-edit"></router-link>
                    <a v-auth="'system:permission:delete'" class="fa fa-trash" @click="onTrash(fun)"></a>
                  </td>
                </tr>
              </template>
            </template>
          </template>
          </tbody>
        </table>
      </div>
    </div>
    <router-view></router-view>
  </content-wrapper>
</template>

<script>
  export default {
    name: 'SystemPermission',
    data() {
      return {
        loading: false,
        dataList: []
      };
    },
    mounted() {
      this.loadPermissionList();
    },
    methods: {
      loadPermissionList() {
        this.$api('system.permission.list').invoke().then(({data}) => {
          this.dataList = data;
        });
      },
      onStatus(row) {
        this.$api('system.permission.updateEnable').invoke({
          id: row.id,
          enable: row.enable
        }).then(() => {
          this.$snotify.success('状态已变更！');
        });
      },
      onTrash(row) {
        this.$snotify.confirm(`确认删除[${row.name}]`, {
          position: 'centerCenter',
          backdrop: 0.5,
          buttons: [
            {
              text: '删除', action: (toast) => {
                this.$snotify.remove(toast.id);
                this.onDelete(row);
              }, bold: true
            },
            {
              text: '取消', action: (toast) => {
                this.$snotify.remove(toast.id);
              }
            }
          ]
        });
      },
      onDelete(row) {
        this.$snotify.async('正在删除...', () => new Promise((resolve, reject) => {
          this.$api('system.permission.delete').invoke({id: row.id}).then(() => {
            resolve({
              title: '操作成功!!!',
              body: `成功删除[${row.name}]`,
              config: {
                timeout: 2000
              }
            });
            this.loadPermissionList();
          }).catch(() => {
            reject({
              body: `删除资源[${row.name}]失败！`,
              config: {
                timeout: 2000
              }
            });
          });
        }), {backdrop: 0.5});
      }
    }
  };
</script>

<style scoped>
  .lv2 td:first-child {
    padding-left: 30px;
  }

  .lv3 td:first-child {
    padding-left: 50px;
  }
</style>
